<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>通知</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="shortcut icon " type="images/x-icon" href="/img/logo.png">
</head>

<body style="overflow: hidden;width: 100%;overflow-y: auto">
<nav class="navbar navbar-light bg-light navbar-expand  navbar-expand-sm  navbar-expand-md navbar-expand-lg navbar-expand-xl mb-3">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03"
            aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand mx-5 text-primary" href="/index">Community</a>
    <div class="collapse navbar-collapse row ">
        <!--未登录展示的导航栏-->
        <div class="offset-9 offset-sm-9 offset-xl-9 " th:if="${avatar} == null">
            <ul class="navbar-nav ">
                <a class="nav-item nav-link ml-5 mr-2  mt-2" href="/login">登录</a>
                <a class="nav-item nav-link ml-2  mt-2" href="/register">注册</a>
            </ul>
        </div>
        <!--        登陆后展示的导航栏-->
        <div class="offset-10 offset-sm-10 offset-xl-10 " th:if="${avatar} != null">
            <ul class="navbar-nav ">
                <a class="nav-item nav-link mx-3" href="/person">
                    <img th:src="${avatar}" style="height: 45px;width: 45px" class="rounded-circle">
                </a>
                <a class="nav-link mx-2  mt-2" href="/publish">发布</a>
            </ul>
        </div>
    </div>
</nav>


<!--    错误提示框-->
<div class="alert alert-warning alert-dismissible fade show mt-3" role="alert" th:if="${signal} == 1">
    <strong>出问题啦！</strong> <span th:text="${error}"> 您还未登录哦~</span><a href="/login">点击登录</a>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<div class="container row col-12" th:if="${signal} != 1">

    <!--垂直导航-->
    <div class="= col-3 float-left">
        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <a class="nav-link active" data-toggle="pill"  onclick="refreshNotification(1)">点赞通知</a>
            <a class="nav-link" data-toggle="pill"  onclick="refreshNotification(0)">评论通知</a>
        </div>
    </div>

    <div class="col-8 float-right">
        <div th:fragment="notificaitonFragment" id="notificationFragment">
            <!--    评论通知内容-->
            <div class="w-100" th:if="${type} == 0">
                <!--        通知的问题-->
                <div class="card border-dark mb-3 w-100" th:each="notification:${notifications}">
                    <div class="card-header" th:text="${notification.getNotifier()}+'评论了你~'"></div>
                    <div class="card-body">
                        <a th:href="@{'/card/' + ${notification.getQuestionId()}}">
                            <h5 class="card-title text-dark font-weight-bold" th:text="'文章标题:' + ${notification.getTitle()}"></h5>
                        </a>
                    </div>
                </div>
            </div>

            <!--    点赞通知内容-->
            <div class="w-100" th:if="${type} == 1">
                <!--        通知的问题-->
                <div class="card border-dark mb-3 w-100" th:each="notification:${notifications}">
                    <div class="card-header" th:text="${notification.getNotifier()}+'点赞了你~'"></div>
                    <div class="card-body">
                        <a th:href="@{'/card/' + ${notification.getQuestionId()}}">
                            <h5 class="card-title text-dark font-weight-bold" th:text="'文章标题:' + ${notification.getTitle()}"></h5>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script>

    /**
     * 提交查看通知需求
     */
    function refreshNotification(type) {
        $.ajax({
            url: "/notification/" + type,
            type: "get",
            success(data) {
                $("#notificationFragment").html(data);
            }
        });
    }
</script>
</body>
</html>